<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" th:replace="~{component/layout :: html(content = ~{::content})}">
<th:block th:fragment="content">
  <div class="hero min-h-screen global-bg flex flex-col items-center justify-start"
       th:with="postConfig=${theme.config.post},globalConfig=${theme.config.global}"
       th:style="${not #strings.isEmpty(globalConfig.images)} ? 'background-image: url(' + ${globalConfig.images} + ')' : ''">
    <div th:if="${globalConfig.overlay_Show}"
         class="hero-overlay min-h-screen"
         id="global-overlay"
         th:classappend="'bg-opacity-' + ${globalConfig.overlay_opacity}
         +' bg-' + ${globalConfig.overlay_color}
         + ' backdrop-' + ${globalConfig.overlay_blur}"></div>
    <div class="flex flex-col items-center justify-start shadow-2xl px-8 pt-4 bg-base-100"
         th:classappend="${postConfig.content_width}" id="post_content">
      <th:block th:replace="~{component/widget/post_breadcrumbs}"/>
      <div class="flex" th:each="category : ${post.spec.categories}">
        <button class="btn btn-link text-base-content" th:text="${categoryFinder.getByName(category).spec.displayName}"></button>
      </div>
      <p class="flex text-5xl text-base-content font-bold" th:text="${post.spec.title}"></p>
      <div class="flex flex-row text-slate-500 py-8 text-sm">
        <div th:text="${#dates.format(post.spec.publishTime, 'yyyy年MM月dd日')}"></div>
        <span class="px-2">•</span>
        <span class="pr-1">BY</span>
        <p class="text-base-content font-bold" th:text="${post.spec.owner}"></p>
      </div>
      <article
              class="prose p-4 !max-w-none"
              th:classappend="${postConfig.content_size}"
      >
        <th:block th:utext="${post.content.content}"> </th:block>
      </article>
      <th:block th:replace="~{component/widget/post_pagination}"/>
    </div>
  </div>
</th:block>
</html>

<style>

  #post_content{
    z-index: 2; /* 内容层级 */
  }


  @media (max-width: 1024px) {
    #post_content {
      width: 80% !important;
      z-index: 2; /* 内容层级 */
    }
  }

  @media (max-width: 820px) {
    #post_content {
      width: 90% !important;
      z-index: 2; /* 内容层级 */
    }
  }

  @media (max-width: 768px) {
    #post_content {
      width: 95% !important;
      z-index: 2; /* 内容层级 */
    }
  }
</style>
